<template>
    <div style="margin: auto;width: 1000px">
        <div class="user-avator" style="background-color: white;height: 110px" v-model="tribune">
            <img style="margin-right: 18px;padding: 20px; display:inline-block;float: left"
                 :src="tribune.url"/>
            <div style="float: left;margin-top: 50px ">
                <a style="display: inline;font-size: 20px;color: #9e9e9e">{{tribune.circleName}}</a><br>
                <span style="display: inline-block;">成员 {{tribune.member}}</span>
                <span style="display: inline;margin-left: 30px">帖子 {{tribune.invitations}}</span>
                <el-button @click="HandleInsert()" style=" padding: 3px 10px;margin-left: 30px" type="success"
                           v-model="buttonvalue">{{buttonvalue.value}}
                </el-button>
            </div>
        </div>
        <div style=";margin: 50px 0;width: 1000px;position: relative;background-color: white;">
            <div style="width: 700px;background-color: white;z-index: 10">
                <router-view/>
            </div>
            <div style="margin: 0 auto;position: absolute;right: 0;top:0;width: 235px;background-color: #fafafa;height: 100%;text-align: center">
                <p style=" float: none;text-align: center;margin-top: 25px;font-size: 20px">国内热门读物</p>
            </div>
        </div>

    </div>
</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<script>
    import Vue from 'vue'

    export default Vue.extend({
        data() {
            return {
                circle:{
                    userId:1,
                    circleId:0,
                },
                contentAll: 0,
                dialogVisible: false,
                contentarr: [],//书圈的信息
                tribune: {
                },
                buttonvalue: {
                    disabledT: "",//是否已加入,1为加入0为未加入
                    value: "+加入",
                },
            }
        },
        methods: {
            loadTribune(id) {
                let url = "http://localhost:9080/circles/" + id + "/select"
                this.axios.get(url).then((response) => {
                    let responseBody = response.data
                    console.log(response.data)
                    this.tribune = responseBody.data;
                })
            },
            HandleInsert() {
                if (this.buttonvalue.disabledT == 0){
                    //加入请求
                    let url ='http://localhost:9080/usercircles/insert'
                    let formData = this.qs.stringify(this.circle);
                    console.log(formData)
                    this.axios.post(url,formData).then((response)=>{
                        console.log('服务器端响应的结果：' + response.data);
                        let responseBody = response.data
                        if (responseBody.state == 20000){
                            this.buttonvalue.disabledT = 1
                            this.buttonvalue.value = "退出"
                            this.$message({
                                message: '加入成功',
                                type: 'success'
                            });
                        }else {
                            this.$notify.error({
                                title: '提示',
                                message:  responseBody.message,

                            });
                        }

                    })
                }else {
                    //退出请求
                    let url ='http://localhost:9080/usercircles/delete'
                    let formData = this.qs.stringify(this.circle);
                    console.log(formData)
                    this.axios.post(url,formData).then((response)=>{
                        console.log('服务器端响应的结果：' + response);
                        let responseBody = response.data
                        if (responseBody.state == 20000){
                            this.buttonvalue.disabledT = 0
                            this.buttonvalue.value = "+加入"
                            this.$message({
                                message: '退出成功',
                                type: 'success'
                            });
                        }else {
                            this.$notify.error({
                                title: '提示',
                                message:  responseBody.message,

                            });
                        }
                    })
                }



            },
            loadButtonvalue(){
                let formData = this.qs.stringify(this.circle);
                console.log(this.circle)
                console.log(formData)
                let url ='http://localhost:9080/usercircles/select?'+formData
                this.axios.get(url).then((response)=>{
                    console.log('服务器端响应的结果：' + response);
                    this.buttonvalue.disabledT = response.data.data
                    console.log(this.buttonvalue.disabledT)
                    console.log(response.data.data)
                    if (this.buttonvalue.disabledT ==  1 ){
                        this.buttonvalue.value = "退出"
                    }else {
                        this.buttonvalue.value = "+加入"
                    }
                })

            }
        },
        created() {

        },
        mounted() {
            let id =this.$route.query.id
            this.circle.circleId=id;
            this.loadTribune(id);
            this.loadButtonvalue()
        }

    })
</script>

<style scoped>

    a {
        text-decoration: none;
        outline: none;
        font-family: "Microsoft Yahei", arial, sans-serif;
        color: #9e9e9e;
    }

    .user-avator img {
        border-radius: 50%;
        width: 70px;
        height: 70px;
    }

    .user-avator {
        padding: 0px;
    }

    p {
        float: left;
        max-width: 430px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
    }


    .left > span {
        position: absolute;
    }

</style>




